<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>USERID</title>
    <script src="../static/js/jquery-3.7.1.min.js"></script>
    <script src="../static/js/jquery.cookie.min.js"></script>
    <script src="../static/js/bootstrap.bundle.min.js"></script>
    <link rel="stylesheet" type="text/css" href="../static/css/bootstrap.min.css">
    <style>
        .card {
            background: #F1F3F5;
            white-space: nowrap;
        }

        .card-title {
            text-align: center;
        }
    </style>
</head>
<body style="background: #F1F3F5;">
<nav class="navbar navbar-expand-sm bg-dark justify-content-between">
    <a class="navbar-brand ms-2" onclick="location.href='./index.html'">Music Online</a>
    <form class="d-flex">
        <label><input class="form-control" type="text" placeholder="Search"></label>
        <button class="btn btn-primary ms-2" type="button">Search</button>
    </form>
    <div class="btn-group btn-group-sm me-3 text-center">
        <img src="../static/img/avatar.jpg" style="width: 30px; height: 30px; cursor:pointer;"
             class="rounded-circle m-1 user-avatar" alt="avatar" onclick="location.reload()"/>
        <button type="button" id="userid" class="btn btn-primary btn-dark userid">USERID</button>
        <button type="button" id="log-out" class="btn btn-primary btn-dark">Log out</button>
    </div>
</nav>

<div class="text-center d-flex flex-column align-items-center justify-content-center" style="height: 50vh">
    <img src="../static/img/avatar.jpg" class="rounded-circle user-avatar" alt="avatar" onclick="location.reload()"/>
    <h4 class="mt-2 userid">USERID</h4>
    <p id="personal"></p>
    <div style="height: 2px; width: 60vw; border-top: 1px solid #999999; float:left; margin-top: 15px"></div>
</div>

<div class="container">
    <div id="music-list" class="row me-3"></div>
    <button id="add" type="button" style="width: 200px; height: 200px; margin-top: 20px"
            class="rounded-3 btn btn-secondary"
            onclick="location.href='./musicAdd.html'">
        <span style="text-align: center; font-size: xxx-large">+</span>
    </button>
</div>

<div class="modal fade" id="del-confirm">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h4>Delete this music</h4>
                <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
            </div>

            <div class="modal-body">
                <p>Are you sure to delete this music?</p>
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-light" data-bs-dismiss="modal">Cancel</button>
                <button id="modal-confirm" type="button" class="btn btn-danger" data-bs-dismiss="modal">Confirm</button>
            </div>
        </div>
    </div>
</div>

<script>
    let server = "http://localhost:8010";

    let url = window.location.href;
    param = url.slice(url.indexOf('?') + 1);
    vinylID = param.split('=')[1];

    let token = $.cookie('token');

    let card_footer = `<div class='card-footer overflow-hidden align-items-center justify-content-center btn-group'>
                        <button class='btn btn-link'>Edit</button>
                        <button class='btn btn-link'>Details</button>
                        <button class='btn btn-link'>Delete</button>
                       </div>`;

    let modal = false;

    $("#log-out").click(function () {
        $.removeCookie('token');
        console.log("User log out.");
        alert("You have been log out.");
        location.href = "./index.html";
    })

    $("#modal-confirm").click(function () {
        modal = true;
    })

    $.ajax({
        type: "GET",
        dataType: "json",
        url: server + "/user/userInfo",
        headers: {
            'Authorization': token,
        },
        success: function (userData) {
            if (userData != null) {
                $(document).attr('title', userData.data.nickName);
                $("#userid").html(userData.data.nickName);
                $(".userid").html(userData.data.nickName);
                $(".user-avatar").attr("src", userData.data.avatar_url);
                let personal = '';
                personal += 'Age: ';
                personal += userData.data.age;
                personal += '&emsp;Sex: ';
                let infoSex = userData.data.sex === 1 ? 'Male' : 'Female';
                personal += infoSex;
                $("#personal").append(personal);
            } else {
                console.log("get user data failed");
            }
        }
    })

    $.ajax({
        type: "GET",
        dataType: "json",
        url: server + "/user/vinylInfo",
        headers: {
            'Authorization': token,
        },
        success: function (result) {
            if (result.data != null) {
                $.each(result.data, function (i, vinyl) {
                    let vinylCard = '';
                    vinylCard += "<div class='col-4 d-flex'><img class='rounded-3' src=''><div class='card'><h5 class='card-title'>";
                    vinylCard += vinyl.musicName;
                    vinylCard += "</h5><p class='card-body'>Author: ";
                    vinylCard += vinyl.musicAuthor;
                    vinylCard += "<br>Date: ";
                    vinylCard += vinyl.issuingDate;
                    vinylCard += "</p>";
                    vinylCard += card_footer;
                    vinylCard += "</div>";
                    $("#music-list").append(vinylCard);
                    $("#music-list img").attr("src", vinyl.musicCover);
                    $("#music-list button:nth-last-child(3):last").click(function () {
                        location.href = "./musicAdd.html?vinylID=" + vinyl.id;
                    })
                    $("#music-list button:nth-last-child(2):last").click(function () {
                        location.href = "./musicDetails.html?vinylID=" + vinyl.id;
                    })
                    $("#music-list button:nth-last-child(1):last").click(function () {
                        console.log("delete music id:" + vinyl.id);
                        $("#del-confirm").modal('show');
                        if (modal) {
                            $.ajax({
                                type: "POST",
                                dataType: "json",
                                url: server + "/music/del",
                                headers: {
                                    'Authorization': $.cookie('token'),
                                },
                                data: vinyl.vinylId,
                                success: function (result) {
                                    if (result.code === 200) {
                                        location.reload();
                                    } else {
                                        console.log(result.message);
                                        alert(result.message);
                                    }
                                },
                                error: function () {
                                    console.log("delete music failed");
                                    alert("Delete Music Failed");
                                }
                            })
                        }
                    })
                })
            }
        }
    })
</script>
</body>
</html>